<template>
    <div class="orderDetail container">
        <header>
            <van-nav-bar title="我的订单" left-arrow @click-left="$router.push('/my')" />
        </header>
        <ly-tab v-model="selectedId" :items="items" :options="options" @change="changeTab" class="movein">
        </ly-tab>

        <section v-if="list.length" ref="wrapper">
            <div style="width:100%">
                <div v-for="(item, index) in newData" :key="index">
                    <Unpaid v-if="item.type == 'unpaidList'" :unpaidList="item.data" @again="refresh"
                        @changeshow="changeshow"></Unpaid>
                    <Tobepaid v-if="item.type == 'tobepaidList'" :tobepaidList="item.data" @again="refresh"
                        @changeshow="changeshow"></Tobepaid>
                    <Paid v-if="item.type == 'paidList'" :paidList="item.data" @again="refresh" @changeshow="changeshow"
                        @changeDeshow="changeDeshow"></Paid>
                    <Tobeshipped v-if="item.type == 'tobeshippedList'" :tobeshippedList="item.data" @again="refresh"
                         @changeDeshow="changeDeshow"></Tobeshipped>
                    <Tobegoods v-if="item.type == 'tobegoodsList'" :tobegoodsList="item.data" @again="refresh"
                     @cancelOrder="cancelOrder"   ></Tobegoods>
                    <Received v-if="item.type == 'receivedList'" :receivedList="item.data" @again="refresh" ></Received>
                    <Returngoods v-if="item.type == 'returngoodsList'" :returngoodsList="item.data" @again="refresh">
                    </Returngoods>
                    <Changegoods v-if="item.type == 'changegoodsList'" :changegoodsList="item.data" @again="refresh"
                      ></Changegoods>
                </div>
                <div class="kong"></div>
            </div>
            <van-popup round v-model="show">商品还未发货</van-popup>
            <van-popup round v-model="deshow">商品未收货，无法删除</van-popup>
            <van-action-sheet v-model="canshow" :actions="actions" @select="onSelect" cancel-text="取消"/>
        </section>
        <section v-else ref="wrapper"> </section>
        <Tabbar></Tabbar>
    </div>

</template>

<script>
import http from '@/common/api/request.js'
import { mapMutations, mapState } from 'vuex';
import BetterScroll from 'better-scroll'
import Unpaid from '@/components/order/unpaid.vue'
import Tobepaid from '../components/order/tobepaid.vue'
import Paid from '../components/order/paid.vue'
import Tabbar from '@/components/common/Tabbar.vue';
import Tobeshipped from '@/components/order/tobeshipped.vue';
import Tobegoods from '@/components/order/tobegoods.vue';
import Received from '@/components/order/received.vue';
import Returngoods from '@/components/order/returngoods.vue';
import Changegoods from '@/components/order/changegoods.vue';
import { Toast } from 'vant';
export default {
    data() {
        return {
            oBScroll: "",
            tBScroll: "",
            show: false,
            deshow: false,
            canshow:false,
            cancelOrderId:0,
            actions: [{ name: '质量问题' }, { name: '规格不对' },{ name: '发票问题' }, { name: '7天无理由' },{ name: '其他' }],
            selectedId: 0,
            items: [
                {
                    id: 0,
                    label: "全部"
                },
                {
                    id: 1,
                    label: "待支付"
                },
                {
                    id: 2,
                    label: "待收货"
                },
                {
                    id: 3,
                    label: "已完成"
                },
                {
                    id: 4,
                    label: "退换货"
                },
            ],
            newData: [],
            options: {
                activeColor: "#ccc"
            }
        };
    },
    computed: {
        ...mapState({
            list: state => state.order.list
        })
    },
    created() {
        this.getData();
    },
    methods: {
        ...mapMutations(["initOrder"]),
        async getData() {
            let res = await http.$axios({
                url: "/api/getOrder/0/data",

                headers: {
                    token: true
                }
            });
            this.initOrder(res.data);
            this.newData = Object.freeze(res.data);
            console.log(res.data);
            this.$nextTick(() => {
                this.oBScroll = new BetterScroll(this.$refs.wrapper, {
                    movable: true,
                    zoom: true,
                    click: true,
                    pullDownRefresh:{
                        threshold:5
                    }
                });
                // 触发下拉刷新的事件， 调用getData 请求数据
				this.oBScroll.on('pullingDown', () => {
					this.getData(() => {
						this.$nextTick(() => {
							this.oBScroll.finishPullDown();
							this.oBScroll.refresh();
						})
					})

				})
            });
        },
        async addData(index) {
            let res = await http.$axios({
                url: '/api/getOrder/' + index + '/data',

                headers: {
                    token: true
                }
            })

            if (res.constructor != Array) {
                this.newData = res.data;
            } else {
                this.newData = res
            }

            this.$nextTick(() => {
                this.tBScroll = new BetterScroll(this.$refs.wrapper, {
                    probeType: 3,
                    bounce: false,
                    click: true
                });
                
            });
        },
        changeTab(item, index) {
            this.addData(index);
        },
        refresh(page) {
            this.addData(page);
            this.$router.push('/myorder')
        },
        changeshow() {
            this.show = true
        },
        changeDeshow() {
            this.deshow = true
        },
        cancelOrder(val) {
            this.canshow = true;
            this.cancelOrderId = val;
           
        },
        onSelect(item) {
        this.canshow = false;
        http.$axios({
            url: "/api/changeGoods",
            method: "POST",
           
            data: {
                orderId: this.cancelOrderId,
                reason:item.name
            }
        }).then(res => {
            if (res.success) {
                Toast(res.msg);
                console.log(res.msg);
                this.refresh();
            }
        });
                
        },
        
    },
    components: { Unpaid, Tobepaid, Paid, Tabbar, Tobeshipped, Tobegoods, Received, Returngoods, Changegoods }
}
</script>

<style scoped>
header {
    width: 100%;
    height: 1.473333rem;

}

::v-deep .van-nav-bar__content {
    background-color: #fff;
}

::v-deep .van-nav-bar__title {
    color: #1b1b1b;
    font-size: 18px;
}

::v-deep .van-nav-bar .van-icon {
    color: #1b1b1b;
    font-size: 0.593333rem;
}

section {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.32rem;
    /* background-color: #f5f5f5; */
    /* margin-top: 1.473333rem; */
    overflow: hidden;
}

section ul {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

section ul li {
    /* display: flex;
    justify-content: space-between;
    align-items: center; */
    padding-left: 0.533333rem;
    margin: 0.213333rem 0;
    background-color: #fff;
    /* height: 108px; */
}

section ul li::before {
    content: '';
    width: 95%;
    display: block;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
}

section ul li span {
    display: inline-block;
    margin-top: 0.373333rem;
}

section ul li img {
    width: 1.973333rem;
    height: 1.973333rem;
}

::v-deep .van-icon {
    font-size: 100px;
}

::v-deep .van-swipe-cell {
    width: 100%;
    height: 100%;
}

::v-deep .van-card__price-integer {
    font-size: 20px;
}

::v-deep .van-card__title {
    font-size: 14px;
    font-weight: 550;
}

::v-deep .van-card__num {
    font-size: 16px;
}

.take-button {
    height: 100%;
    background-color: #ccc;
    border: 1px solid #ccc;
}

.delete-button {
    height: 100%;
    background-color: #ccc;
    border: 1px solid #ccc;
}

.paystatus {
    font-size: 18px;
}

::v-deep .van-popup .van-popup--top .van-notify .van-notify--danger {
    height: 1.473333rem;
    font-size: 18px;
}

::v-deep .van-popup--center {
    width: 150px;
    height: 45px;
    background-color: #ccc;
    text-align: center;
    align-items: center;
    line-height: 45px;
}

::v-deep .ly-tab-list {
    height: 1.6rem;

}

::v-deep .ly-tab-item {
    font-size: 16px;

}

.kong {
    width: 100%;
    height: 1.6rem;
}
</style>